<template>
  <div>
    <el-row class="top_row">
      <el-col :span="24">
        <div class="top_title">
          <div class="left_add">
            <el-button type="danger" @click="$router.push('/Role/NameEdit')" size="mini" icon="el-icon-circle-plus">新增
            </el-button>
          </div>
          <div class="right_sel">
            <el-input size="mini" v-model="SelName" placeholder="查找...">
              <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table :data="RoleNameDt">
            <el-table-column prop="pk_Name" min-width="120" label="ID"></el-table-column>
            <el-table-column prop="RoleName_CHS" min-width="320" label="名称"></el-table-column>
            <el-table-column prop="PowerValue" width="300" label="权限值"></el-table-column>
            <el-table-column label="操作" min-width="270" fixed="right" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button type="info" @click="SetRole(scope.row.pk_Name,scope.row.RoleName_CHS)" size="mini"
                    icon="el-icon-setting">设定
                  </el-button>
                  <el-button type="primary" @click="Edit(scope.row.pk_Name)" size="mini" icon="el-icon-edit-outline">修改
                  </el-button>
                  <el-popconfirm @onConfirm="Del(scope.$index,scope.row.pk_Name)" style="margin-left:10px;"
                    title="确定删除此角色？">
                    <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>
<script>
export default {
  data () {
    return {
      RoleNameDt: [],
      SelName: ""
    }
  },
  mounted () {
    //获取角色信息
    this.$axios({
      url: '/HrApi/RoleMange/GetRoleNameList',
      method: 'GET'
    }).then(res => {
      this.RoleNameDt = res.data.data;
    })
  },
  methods: {
    //编辑
    Edit (id) {
      this.$router.push({
        path: "/Role/NameEdit",
        query: {
          pk_Name: id
        }
      })
    },
    //设置
    SetRole (pk_Name, RoleName_CHS) {
      this.$router.push({
        path: '/Role/List',
        query: {
          pk_Name,
          RoleName_CHS
        }
      })
    },
    //删除
    Del (index, pk_Name) {
      this.$axios({
        url: '/HrApi/RoleMange/DelRoleName',
        method: 'POST',
        data: this.$Qs.stringify({
          pk_Name: pk_Name
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          //在集合中删除此行
          this.RoleNameDt.splice(index, 1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //模糊查询
    SelDt () {
      this.$axios({
        url: '/HrApi/RoleMange/GetRoleName',
        method: 'GET',
        params: {
          NameID: this.SelName,
          Type: "SelName"
        }
      }).then(res => {
        if (!res.data.code) {
          this.RoleNameDt = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  watch: {
    //侦听模糊查询，如果为空自动显示所有数据
    SelName (n) {
      if (n === "") {
        this.SelDt()
      }
    }
  }
}
</script>